<template>
	<!-- 门票列表 -->
	<u-list 
		class="ticket-list"
		@scrolltolower="scrolltolower"
	>
		<u-list-item
			v-for="(item, index) in list"
			:key="index"
		>
			<u-cell @click="onClickItem(item)">
				<div slot="label" class="ticket-list-item flex">
					<div class="poster">
						<u-image 
							:fade="false"
							mode="widthFix" radius="10rpx"
							width="260rpx" height="auto" 
							:src="item.poster"
						/>
					</div>
					<!-- 右边信息 -->
					<div class="flex-column" style="justify-content: space-between;width:0;flex: 1;">
						<div>
							<div class="title">{{item.title}}</div>
							<div class="activityTime">{{item.beginTime}} 至 {{item.endTime}}</div>
							<div class="location">{{item.city}} | {{item.address}}</div>
						</div>
						<div class="flex" style="align-items: flex-end;justify-content: space-between;">
							<div>
								<span class="beginPrice">
									<span>￥</span><span style="font-size: 42rpx;">{{item.price}}</span>
								</span>
								<text style="color: #999999;">起</text>
							</div>
							<div style="font-size: 26rpx;">
								{{item.state===1?'在售':'停售'}}
								<!-- <span v-if="item.state===1" style="margin-left: 12rpx;"> | 剩余: {{item.stock}}</span> -->
							</div>
						</div>
					</div>
				</div>
			</u-cell>
		</u-list-item>
		
		<u-loadmore :status="status" line/>
	</u-list>
</template>

<script>
	
	export default {
		components: {
		},
		data() {
			return {
				// loadmore / loading / nomore
				status: 'nomore',
				// 先不加分页了
				list: [],
				pageSet: {
					page: 1,
					pageSize: 20
				},
			}
		},
		mounted(){
			this.findList();
		},
		methods: {
			// 获取门票列表
			findList(){
				let {pageSet} = this;
				let form = {
					...pageSet,
				};
				this.$api.app.goods.query(form).then(res=>{
					let records = res.data.records;
					this.list = records;
				});
			},
			// 列表滚动到底部触发
			scrolltolower() {
				console.log("滚动到底部");
			},
			// 点击项
			onClickItem(item){
				console.log("点击项", item);
				uni.navigateTo({
					url: '/pages/yuYue/ticketDetail/ticketDetail?uid=' + item.uid
				})
			},
		}
	}
</script>

<style scoped>
	.ticket-list {
		background-color: #FFFFFF;
	}
	.ticket-list .ticket-list-item{
		
		margin-bottom: 14rpx;
	}
	.ticket-list .ticket-list-item .poster{
		margin-right: 12rpx;
	}
	.ticket-list .ticket-list-item .title{
		font-weight: bold;
		font-size: 36rpx;
		margin-bottom: 12rpx;
	}
	.ticket-list .ticket-list-item .activityTime{
		color: #999999;
		font-size: 26rpx;
	}
	.ticket-list .ticket-list-item .location{
		color: #999999;
		font-size: 26rpx;
	}
	.ticket-list .ticket-list-item .beginPrice{
		color: red;
	}
	
</style>
